<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
      创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
    </div>
    <style>
      .box {
        width: 500px;
        height: 300px;
        /* border: 1px solid black; */
        /* background-image: linear-gradient(to right,red, green); */
        /* background-image: linear-gradient(45deg, red, green, orange); */
        /* background-image: linear-gradient(red, green, orange); */
        /* background-image: linear-gradient(red 100px, green 200px); */

        /* background-image: linear-gradient(red 10%, green 20%); */
        /* background-image: linear-gradient(red 10%, green 10%, green 20%); */

        /* linear-gradient(direction, color-stop1, color-stop2, ...); */

        /* background-image: repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%); */

        /* repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...); */

        /* background-image: url("./3dr_chihiro.png"), url("./3dr_mono.png"); */
        /* background-image: repeating-linear-gradient(90deg, black 0%, black 10%, transparent 10%, transparent 20%),
          repeating-linear-gradient(red 0%, red 10%, green 10%, green 20%); */

        /* background-image: repeating-linear-gradient(
            45deg,
            rgba(13, 172, 53, 0.5) 0px,
            rgba(13, 172, 53, 0.5) 10px,
            transparent 10px,
            transparent 20px
          ),
          repeating-linear-gradient(
            -45deg,
            rgb(224, 16, 145) 0px,
            rgb(224, 16, 145) 10px,
            transparent 10px,
            transparent 20px
          ); */

        line-height: 30px;

        background-image: repeating-linear-gradient(transparent 0px, transparent 29px, red 29px, red 30px);
      }
    </style>
  </body>
</html>
